<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>样式用法</title>
    <style type="text/css">
        div {
            font-family: 微软雅黑;
            background-color: antiquewhite;
            border: 1px solid blueviolet;
            color: blueviolet
        }
    </style>
    <link rel="stylesheet" type="text/css" href="../CSS/3.css"/>
<link rel="stylesheet" type="text/css" href="../CSS/CSS.css"></head>
<body>
<p>样式的意义</p>
<p>　　是用来控制和装饰网页页面布局的</p>
<hr/>
<p style="font-family:微软雅黑">样式的三种方法</p>
<fieldset><legend><h4>用法一：[内联样式 行内样式]</h4></legend>
    <p>直接在标签里编写style值，通过style的属性值来指定样式内容，属性中可以写多组属性值</p>
    <p>代码示例:</p>
   <p><pre>　　　　&lt;p style="font-family: 微软雅黑;
        border: 1px solid blueviolet;
        background-color: antiquewhite;
        color: #7ec8ea"&gt;代码效果&lt;/p&gt;</pre></p>
    <p>代码效果：</p>
    <p style="font-family: 微软雅黑; border: 1px solid blueviolet;background-color: antiquewhite;color: blueviolet">代码效果</p>
</fieldset>
<br/>
<fieldset><legend><h4>用法二：[内部样式]</h4></legend>
    <p>是使用选择器的方法</p>
    <p>代码示例:</p>
    <p><pre>　　 &lt;head&gt;
        &lt;style type="text/css"&gt;
        div{
            font-family: 微软雅黑;
            background-color: antiquewhite;
            border: 1px solid blueviolet;
            color: blueviolet
        }

    &lt;/style&gt;&lt;/head&gt;
        &lt;body&gt;
    &lt;div&gt;我是div标记&lt;/div&gt;
    &lt;p&gt;我是p标记&lt;/p&gt;
    &lt;div&gt;我是div标记&lt;/div&gt;
    &lt;/body&gt;</pre></p>
    <p>代码效果：</p>

    <div>我是div标记</div>
    <p>我是p标记</p>
    <div>我是div标记</div>
</fieldset>
<br/>
<fieldset><legend><h4>用法三：[外部样式]</h4></legend>
    <p>通过link标签引进来</p>
    <p>代码示例:</p>
    <p><pre>　　　　新建一个CSS样式表，然后用link标签引用进来</pre></p>
    <p>&lt;link rel="stylesheet" type="text/css" href="../CSS/3.css"/&gt;</p>
    <p>代码效果：</p>
    <span>我是span标签</span>
</fieldset>


</body>
</html>